<template>
	<view class="wrapper">
		<view class="uni-segmented-control-wrapper">
			<scroll-view v-if="scrollViewVisible" scroll-x :scroll-left="scrollLeft" scroll-with-animation class="scroll-wrapper">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
					activeColor="#4BB7DB" inActiveColor="#f2f3f5"></uni-segmented-control>
			</scroll-view>
			<view class="content">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :model="valiFormData" labelWidth="0">
					<view v-show="current === 0">
						<uni-forms-item label="" name="childName">
							<uni-easyinput v-model="valiFormData.childName" placeholder="姓名(必填)" />
						</uni-forms-item>
						<uni-forms-item label="" name="childType">
							<uni-easyinput v-model="valiFormData.childType" placeholder="儿童编号" />
						</uni-forms-item>
						<uni-forms-item label="" name="childIdCardNumber">
							<uni-easyinput v-model="valiFormData.childIdCardNumber" placeholder="身份证号(必填)" />
						</uni-forms-item>
						<uni-forms-item label="" name="childBirth">
							<uni-datetime-picker type="date" v-model="valiFormData.childBirth"
								@maskClick="maskClick" placeholder="出生日期" :clear-icon="true"/>
						</uni-forms-item>
						<uni-forms-item label="" name="childSex">
							<uni-data-select v-model="valiFormData.childSex" :localdata="rangeChildSex"
								@change="changeChildSex" placeholder="性别"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="childNationality">
							<uni-data-select v-model="valiFormData.childNationality" :localdata="rangeChildNationality"
								placeholder="民族"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="childHukouType">
							<uni-data-select v-model="valiFormData.childHukouType" :localdata="rangeChildHukouType"
								@change="changeChildHukouType" placeholder="户口分类"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="childHukouProperties">
							<uni-data-select v-model="valiFormData.childHukouProperties"
								:localdata="rangeChildHukouProperties" @change="changeChildHukouProperties"
								placeholder="户籍性质"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="childRegisteredAddress">
							<uni-easyinput v-model="valiFormData.childRegisteredAddress" placeholder="户籍地址" />
						</uni-forms-item>
						<uni-forms-item label="" name="childHomeAddress">
							<uni-easyinput v-model="valiFormData.childHomeAddress" placeholder="现住址" />
						</uni-forms-item>
						<uni-forms-item label="" name="childHealthStatus">
							<uni-data-select v-model="valiFormData.childHealthStatus"
								:localdata="rangeChildHealthStatus" @change="changeChildHealthStatus"
								placeholder="健康状况" placement="top"></uni-data-select>
						</uni-forms-item>
					</view>
					<view v-show="current === 1">
						<uni-forms-item label="" name="childEducationStatus">
							<uni-data-select v-model="valiFormData.childEducationStatus"
								:localdata="rangeChildEducationStatus" placeholder="学业情况"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="childQualificationStatus">
							<uni-data-select v-model="valiFormData.childQualificationStatus"
								:localdata="rangeChildQualificationStatus" placeholder="就学情况"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="childGuardianType">
							<uni-data-select v-model="valiFormData.childGuardianType"
								:localdata="rangeChildGuardianType" placeholder="监护类型"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="childRescueMeasures">
							<uni-data-select v-model="valiFormData.childRescueMeasures"
								:localdata="rangeChildRescueMeasures" placeholder="救助措施"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="childOtherStatus">
							<uni-data-select v-model="valiFormData.childOtherStatus" :localdata="rangeChildOtherStatus"
								placeholder="其它特殊情况"></uni-data-select>
						</uni-forms-item>
					</view>
					<!--父亲信息-->
					<view v-show="current === 2">
						<uni-forms-item label="" name="fatherName">
							<uni-easyinput v-model="valiFormData.fatherName" placeholder="姓名" />
						</uni-forms-item>
						
						<uni-forms-item label="" name="fatherCardType">
							<uni-data-select v-model="valiFormData.fatherCardType" :localdata="IDCardType"
								placeholder="证件类型"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="fatherIdCardNumber">
							<uni-easyinput v-model="valiFormData.fatherIdCardNumber" placeholder="证件号码" />
						</uni-forms-item>

						<uni-forms-item label="" name="fatherSpecialCases">
							<uni-data-select v-model="valiFormData.fatherSpecialCases" :localdata="specialCases"
								placeholder="特殊情况"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="fatherHomeAddressStatus">
							<uni-data-select v-model="valiFormData.fatherHomeAddressStatus"
								:localdata="nowHomeAddressStatus" placeholder="现住址类型"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="fatherPhoneNumber">
							<uni-easyinput v-model="valiFormData.fatherPhoneNumber" placeholder="联系方式" />
						</uni-forms-item>

						<uni-forms-item label="" name="fatherRegisteredAddress">
							<uni-easyinput v-model="valiFormData.fatherRegisteredAddress" placeholder="户籍地址" />
						</uni-forms-item>

						<uni-forms-item label="" name="fatherHomeAddress">
							<uni-easyinput v-model="valiFormData.fatherHomeAddress" placeholder="现住址" />
						</uni-forms-item>

						<uni-forms-item label="" name="fatherHealthStatus">
							<uni-data-select v-model="valiFormData.fatherHealthStatus" :localdata="healthStatus"
								placeholder="健康状况" placement="top"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="fatherMoneySource">
							<uni-data-select v-model="valiFormData.fatherMoneySource" :localdata="moneySource"
								placeholder="经济来源" placement="top"></uni-data-select>
						</uni-forms-item>
					</view>
					<view v-show="current === 3">
						<uni-forms-item label="" name="motherName">
							<uni-easyinput v-model="valiFormData.motherName" placeholder="姓名" />
						</uni-forms-item>

						<uni-forms-item label="" name="motherCardType">
							<uni-data-select v-model="valiFormData.motherCardType" :localdata="IDCardType"
								placeholder="证件类型"></uni-data-select>
						</uni-forms-item>
						
						<uni-forms-item label="" name="motherIdCardNumber">
							<uni-easyinput v-model="valiFormData.motherIdCardNumber" placeholder="证件号码" />
						</uni-forms-item>

						<uni-forms-item label="" name="motherSpecialCases">
							<uni-data-select v-model="valiFormData.motherSpecialCases" :localdata="specialCases"
								placeholder="特殊情况"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="motherHomeAddressStatus">
							<uni-data-select v-model="valiFormData.motherHomeAddressStatus"
								:localdata="nowHomeAddressStatus" placeholder="现住址类型"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="motherPhoneNumber">
							<uni-easyinput v-model="valiFormData.motherPhoneNumber" placeholder="联系方式" />
						</uni-forms-item>

						<uni-forms-item label="" name="motherRegisteredAddress">
							<uni-easyinput v-model="valiFormData.motherRegisteredAddress" placeholder="户籍地址" />
						</uni-forms-item>

						<uni-forms-item label="" name="motherHomeAddress">
							<uni-easyinput v-model="valiFormData.motherHomeAddress" placeholder="现住址" />
						</uni-forms-item>

						<uni-forms-item label="" name="motherHealthStatus">
							<uni-data-select v-model="valiFormData.motherHealthStatus" :localdata="healthStatus"
								placeholder="健康状况" placement="top"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="motherMoneySource">
							<uni-data-select v-model="valiFormData.motherMoneySource" :localdata="moneySource"
								placeholder="经济来源" placement="top"></uni-data-select>
						</uni-forms-item>
					</view>
					<view v-show="current === 4">
						<uni-forms-item label="" name="caregiversGrandfatherName">
							<uni-easyinput v-model="valiFormData.caregiversGrandfatherName" placeholder="祖父姓名" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversGrandfatherPhone">
							<uni-datetime-picker type="date" :clear-icon="true"
								v-model="valiFormData.caregiversGrandfatherPhone" placeholder="祖父生日" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversGrandmotherName">
							<uni-easyinput v-model="valiFormData.caregiversGrandmotherName" placeholder="祖母姓名" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversGrandmotherPhone">
							<uni-datetime-picker type="date" :clear-icon="true"
								v-model="valiFormData.caregiversGrandmotherPhone" placeholder="祖母生日" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversMaternalGrandfatherName">
							<uni-easyinput v-model="valiFormData.caregiversMaternalGrandfatherName" placeholder="外祖父姓名"/>
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversMaternalGrandfatherPhone">
							<uni-datetime-picker type="date" :clear-icon="true"
								v-model="valiFormData.caregiversMaternalGrandfatherPhone" placeholder="外祖父生日" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversMaternalGrandmotherName">
							<uni-easyinput v-model="valiFormData.caregiversMaternalGrandmotherName" placeholder="外祖母姓名"/>
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversMaternalGrandmotherPhone">
							<uni-datetime-picker type="date" :clear-icon="true"
								v-model="valiFormData.caregiversMaternalGrandmotherPhone" placeholder="外祖父生日" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversSpecialCases">
							<uni-data-select v-model="valiFormData.caregiversSpecialCases"
								:localdata="rangeCaregiversSpecialCases" placeholder="特殊情况"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversParentAppoint">
							<uni-data-select v-model="valiFormData.caregiversParentAppoint"
								:localdata="rangecaregiversParentAppoint" placeholder="父母有无委托照料人"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversParentAppointReason">
							<uni-data-select v-model="valiFormData.caregiversParentAppointReason"
								:localdata="rangecaregiversParentAppointReason" placeholder="委托原因"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversName">
							<uni-easyinput v-model="valiFormData.caregiversName" placeholder="受委托人姓名" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversPhone">
							<uni-easyinput v-model="valiFormData.caregiversPhone" placeholder="联系方式" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversCardType">
							<uni-data-select v-model="valiFormData.caregiversCardType"
								:localdata="rangecaregiversCardType" placeholder="证件类型" placement="top"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversIdCardNumber">
							<uni-easyinput v-model="valiFormData.caregiversIdCardNumber" placeholder="证件号码" />
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversRelationship">
							<uni-data-select v-model="valiFormData.caregiversRelationship"
								:localdata="rangecaregiversRelationship" placeholder="与儿童关系" placement="top"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="caregiversHealth">
							<uni-data-select v-model="valiFormData.caregiversHealth" :localdata="rangecaregiversHealth"
								placeholder="健康状况" placement="top"></uni-data-select>
						</uni-forms-item>
					</view>
					<view v-show="current === 5">
						<uni-forms-item label="" name="agencyName">
							<uni-easyinput v-model="valiFormData.agencyName" placeholder="机构名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="" name="agencyFixedTelephone">
							<uni-easyinput v-model="valiFormData.agencyFixedTelephone"
								placeholder="固定电话"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="" name="agencyType">
							<uni-data-select v-model="valiFormData.agencyType" :localdata="rangeAgencyType"
								placeholder="单位性质"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="agencyCuratorName">
							<uni-easyinput v-model="valiFormData.agencyCuratorName" placeholder="负责人"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="" name="agencyCuratorPhone">
							<uni-easyinput v-model="valiFormData.agencyCuratorPhone" placeholder="联系方式"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="" name="agencyAddress">
							<uni-easyinput v-model="valiFormData.agencyAddress" placeholder="机构地址"></uni-easyinput>
						</uni-forms-item>
					</view>
				</uni-forms>

			</view>
		</view>

		<div class="space"></div>

		<view class="submitForm">
			<uni-forms-item label="" name="advise">
				<uni-data-select v-model="valiFormData.advise" :localdata="rangeadvise"
					placeholder="帮扶建议(必选)" placement="top"></uni-data-select>
			</uni-forms-item>
			<button type="primary" @click="submit(valiForm)">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue";
	import {
		HOST
	} from "../../static/js/const";

	let scrollViewVisible = ref(true);
	const scrollLeft = ref(0); // 控制横向滚动位置
	
	const items = ref(['儿童信息', '生活情况', '父亲信息', '母亲信息', '委托人照料人', '机构信息']);
	const current = ref(0);

	const valiForm = ref(null);

	function onClickItem(e) {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
			
			if (e.currentIndex !== 0 && !valiFormData.value.childName) {
				uni.showToast({
					title: "留守儿童姓名不能为空",
					icon: "none"
				});
				return;
			}
			
			if (e.currentIndex !== 0 && !valiFormData.value.childIdCardNumber) {
				uni.showToast({
					title: "留守儿童身份证号不能为空",
					icon: "none"
				});
				current.value = 0;
			}
		}
	}

	const options = ref([]);
	const buttonGroup = ref([{
			text: '浏览监控',
			backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
			color: '#fff'
		},
		{
			text: '处理',
			backgroundColor: '#088FEB',
			color: '#fff'
		},
		{
			text: '忽略',
			backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
			color: '#fff'
		}
	]);

	const valiFormData = ref({
		childName: "",
		childType: "",
		childIdCardNumber: "",
		childBirth: "",
		childSex: "",
		childNationality: "",
		childHukouType: "",
		childHukouProperties: "",
		childRegisteredAddress: "",
		childHomeAddress: "",
		childHealthStatus: "",
		childEducationStatus: "",
		childQualificationStatus: "",
		childGuardianType: "",
		childRescueMeasures: "",
		childOtherStatus: "",
		fatherName: "",
		fatherIdCardNumber: "",
		fatherCardType: "",
		fatherSpecialCases: "",
		fatherHomeAddressStatus: "",
		fatherHomeAddress: "",
		fatherPhoneNumber: "",
		fatherRegisteredAddress: "",
		fatherHealthStatus: "",
		fatherMoneySource: "",
		motherName: "",
		motherIdCardNumber: "",
		motherCardType: "",
		motherSpecialCases: "",
		motherHomeAddressStatus: "",
		motherHomeAddress: "",
		motherPhoneNumber: "",
		motherRegisteredAddress: "",
		motherHealthStatus: "",
		motherMoneySource: "",
		caregiversGrandfatherName: "",
		caregiversGrandfatherPhone: "",
		caregiversGrandmotherName: "",
		caregiversGrandmotherPhone: "",
		caregiversMaternalGrandfatherName: "",
		caregiversMaternalGrandfatherPhone: "",
		caregiversMaternalGrandmotherName: "",
		caregiversMaternalGrandmotherPhone: "",
		caregiversSpecialCases: "",
		caregiversParentAppoint: "",
		caregiversParentAppointReason: "",
		caregiversName: "",
		caregiversPhone: "",
		caregiversCardType: "",
		caregiversIdCardNumber: "",
		caregiversRelationship: "",
		caregiversHealth: "",
		agencyName: "",
		agencyFixedTelephone: "",
		agencyType: "",
		agencyCuratorName: "",
		agencyCuratorPhone: "",
		agencyAddress: "",
		advise: "",
	});

	// 性别
	const rangeChildSex = ref([{
			value: "0",
			text: "男"
		},
		{
			value: "1",
			text: "女"
		}
	]);

	const changeChildSex = (e) => {
		console.log("e:", e);
	}

	// 民族
	const rangeChildNationality = ref([{
			"text": "汉族",
			"value": "1",
		},
		{
			"text": "瑶族",
			"value": "13",
		},
		{
			"text": "蒙古族",
			"value": "2",
		},
		{
			"text": "回族",
			"value": "3",
		},
		{
			"text": "藏族",
			"value": "4",
		},
		{
			"text": "维吾尔族",
			"value": "5",
		},
		{
			"text": "苗族",
			"value": "6",
		},
		{
			"text": "彝族",
			"value": "7",
		},
		{
			"text": "壮族",
			"value": "8",
		},
		{
			"text": "布依族",
			"value": "9",
		},
		{
			"text": "朝鲜族",
			"value": "10",
		},
		{
			"text": "满族",
			"value": "11",
		},
		{
			"text": "侗族",
			"value": "12",
		},
		{
			"text": "白族",
			"value": "14",
		},
		{
			"text": "土家族",
			"value": "15",
		},
		{
			"text": "哈尼族",
			"value": "16",
		},
		{
			"text": "哈萨克族",
			"value": "17",
		},
		{
			"text": "傣族",
			"value": "18",
		},
		{
			"text": "黎族",
			"value": "19",
		},
		{
			"text": "傈僳族",
			"value": "20",
		},
		{
			"text": "佤族",
			"value": "21",
		},
		{
			"text": "畲族",
			"value": "22",
		},
		{
			"text": "高山族",
			"value": "23",
		},
		{
			"text": "拉祜族",
			"value": "24",
		},
		{
			"text": "水族",
			"value": "25",
		},
		{
			"text": "东乡族",
			"value": "26",
		},
		{
			"text": "纳西族",
			"value": "27",
		},
		{
			"text": "景颇族",
			"value": "28",
		},
		{
			"text": "柯尔克孜族",
			"value": "29",
		},
		{
			"text": "土族",
			"value": "30",
		},
		{
			"text": "达斡尔族",
			"value": "31",
		},
		{
			"text": "仫佬族",
			"value": "32",
		},
		{
			"text": "羌族",
			"value": "33",
		},
		{
			"text": "布朗族",
			"value": "34",
		},
		{
			"text": "撒拉族",
			"value": "35",
		},
		{
			"text": "毛南族",
			"value": "36",
		},
		{
			"text": "仡佬族",
			"value": "37",
		},
		{
			"text": "锡伯族",
			"value": "38",
		},
		{
			"text": "阿昌族",
			"value": "39",
		},
		{
			"text": "普米族",
			"value": "40",
		},
		{
			"text": "塔吉克族",
			"value": "41",
		},
		{
			"text": "怒族",
			"value": "42",
		},
		{
			"text": "乌孜别克族",
			"value": "43",
		},
		{
			"text": "俄罗斯族",
			"value": "44",
		},
		{
			"text": "鄂温克族",
			"value": "45",
		},
		{
			"text": "德昂族",
			"value": "46",
		},
		{
			"text": "保安族",
			"value": "47",
		},
		{
			"text": "裕固族",
			"value": "48",
		},
		{
			"text": "京族",
			"value": "49",
		},
		{
			"text": "塔塔尔族",
			"value": "50",
		},
		{
			"text": "独龙族",
			"value": "51",
		},
		{
			"text": "鄂伦春族",
			"value": "52",
		},
		{
			"text": "赫哲族",
			"value": "53",
		},
		{
			"text": "门巴族",
			"value": "54",
		},
		{
			"text": "珞巴族",
			"value": "55",
		},
		{
			"text": "基诺族",
			"value": "56",
		},
		{
			"text": "未定族称人口",
			"value": "57",
		},
		{
			"text": "入籍",
			"value": "入籍",
		}
	]);

	const rangeCaregiversSpecialCases = ref([{
			"text": "被执行其他限制人身自由的措施",
			"value": "1",
		},
		{
			"text": "死亡",
			"value": "2",
		},
		{
			"text": "失踪",
			"value": "3",
		},
		{
			"text": "重病",
			"value": "4",
		},
		{
			"text": "重残",
			"value": "5",
		},
		{
			"text": "失联",
			"value": "6",
		},
		{
			"text": "服刑在押",
			"value": "7",
		},
		{
			"text": "强制隔离戒毒",
			"value": "8",
		},
		{
			"value": "9",
		},
		{
			"text": "其他",
			"value": "10",
		}
	])

	// 户口分类
	const rangeChildHukouType = ref([{
			value: "1",
			text: "本辖区户口"
		},
		{
			value: "2",
			text: "外省市户口"
		},
		{
			value: "3",
			text: "无户口"
		}
	]);

	const changeChildHukouType = (e) => {
		console.log("e:", e);
	}

	// 户籍性质
	const rangeChildHukouProperties = ref([{
			value: "1",
			text: "农村居民户口"
		},
		{
			value: "2",
			text: "城镇居民户口"
		}
	]);

	const changeChildHukouProperties = (e) => {
		console.log("e:", e);
	}

	// 健康状况
	const rangeChildHealthStatus = ref([{
			value: "1",
			text: "健康"
		},
		{
			value: "2",
			text: "一般或较弱"
		},
		{
			value: "3",
			text: "慢性病"
		},
		{
			value: "4",
			text: "重病"
		},
		{
			value: "5",
			text: "残疾"
		},
		{
			value: "6",
			text: "未说明情况"
		},
		{
			value: "7",
			text: "其它"
		}
	]);

	const changeChildHealthStatus = (e) => {
		console.log("e:", e);
	}

	// 学业情况
	const rangeChildEducationStatus = ref([{
			value: "1",
			text: "学龄前"
		},
		{
			value: "2",
			text: "在读"
		},
		{
			value: "3",
			text: "毕业"
		},
		{
			value: "4",
			text: "肄业"
		},
		{
			value: "5",
			text: "结业"
		},
		{
			value: "6",
			text: "休学"
		},
		{
			value: "7",
			text: "其它"
		}
	])

	// 就学情况
	const rangeChildQualificationStatus = ref([{
			value: "1",
			text: "文盲或半文盲"
		},
		{
			value: "2",
			text: "幼儿园"
		},
		{
			value: "3",
			text: "学龄前"
		},
		{
			value: "4",
			text: "小学"
		},
		{
			value: "5",
			text: "初中"
		},
		{
			value: "6",
			text: "高中"
		},
		{
			value: "7",
			text: "技工学校"
		},
		{
			value: "8",
			text: "中等专业技术学校或中等技术学校"
		},
		{
			value: "9",
			text: "大专或专科学校"
		},
		{
			value: "10",
			text: "大学本科"
		},
		{
			value: "11",
			text: "硕士研究生"
		},
		{
			value: "12",
			text: "博士研究生"
		},
		{
			value: "13",
			text: "未说明情况"
		},
		{
			value: "14",
			text: "特殊教育"
		}
	])

	// 监护类型
	const rangeChildGuardianType = ref([{
			value: "1",
			text: "监护情况一般"
		},
		{
			value: "2",
			text: "监护情况良好"
		},
		{
			value: "3",
			text: "监护落实不到位"
		}
	])

	// 救助措施
	const rangeChildRescueMeasures = ref([{
			value: "1",
			text: "无"
		},
		{
			value: "2",
			text: "建档立卡贫困户"
		},
		{
			value: "3",
			text: "最低生活保障"
		},
		{
			value: "4",
			text: "特困供养"
		},
		{
			value: "5",
			text: "临时救助"
		},
		{
			value: "6",
			text: "医疗救助"
		},
		{
			value: "7",
			text: "住房救助"
		},
		{
			value: "8",
			text: "困难残疾人生活补助"
		},
		{
			value: "9",
			text: "重度残疾人护理补助"
		},
		{
			value: "10",
			text: "孤儿津贴"
		},
		{
			value: "11",
			text: "其他"
		}
	])

	// 其它特殊情况
	const rangeChildOtherStatus = ref([{
			value: "1",
			text: "轻微涉法"
		},
		{
			value: "2",
			text: "吸毒"
		},
		{
			value: "3",
			text: "酗酒"
		},
		{
			value: "4",
			text: "流浪乞讨"
		},
		{
			value: "5",
			text: "其他"
		},
	]);

	// 证件类型
	const IDCardType = ref([{
			value: "1",
			text: "内地居民身份证"
		},
		{
			value: "2",
			text: "香港居民身份证"
		},
		{
			value: "3",
			text: "澳门居民身份证"
		},
		{
			value: "4",
			text: "台湾居民身份证"
		},
		{
			value: "5",
			text: "护照"
		}, {
			value: "6",
			text: "军官证"
		},
		{
			value: "7",
			text: "士兵证"
		},
		{
			value: "8",
			text: "其他有效国籍旅行证"
		}
	]);

	// 特殊情况
	const specialCases = ref([{
			value: "1",
			text: "被执行其他限制人身自由的措施"
		},
		{
			value: "2",
			text: "死亡"
		},
		{
			value: "3",
			text: "失踪"
		},
		{
			value: "4",
			text: "重病"
		},
		{
			value: "5",
			text: "重残"
		}, {
			value: "6",
			text: "失联"
		},
		{
			value: "7",
			text: "服刑在押"
		},
		{
			value: "8",
			text: "强制隔离戒毒"
		},
		{
			value: "9",
			text: "撤销监护资格"
		},
		{
			value: "10",
			text: "其他"
		}
	]);

	// 现住址
	const nowHomeAddressStatus = ref([{
			value: "1",
			text: "国内"
		},
		{
			value: "2",
			text: "国外"
		}
	]);

	// 健康状况
	const healthStatus = ref([{
			value: "1",
			text: "健康"
		},
		{
			value: "2",
			text: "一般或较弱"
		},
		{
			value: "3",
			text: "慢性病"
		},
		{
			value: "4",
			text: "重病"
		},
		{
			value: "5",
			text: "残疾"
		}, {
			value: "6",
			text: "未说明情况"
		},
		{
			value: "7",
			text: "其它"
		}
	]);

	const moneySource = ref([{
			value: "1",
			text: "外出打工"
		},
		{
			value: "2",
			text: "种植养殖"
		},
		{
			value: "3",
			text: "政府救济"
		},
		{
			value: "4",
			text: "亲朋接济"
		},
		{
			value: "5",
			text: "其他"
		}
	]);

	// 5、委托照料人信息
	const rangecaregiversParentAppoint = ref([{
			value: 0,
			text: "有"
		},
		{
			value: 1,
			text: "无"
		}
	]);

	// 委托原因
	const rangecaregiversParentAppointReason = ref([{
			value: "1",
			text: "父母双方同时外出"
		},
		{
			value: "2",
			text: "父母一方外出，另一方无监护能力"
		},
		{
			value: "3",
			text: "父母双方无监护能力"
		}
	]);

	const rangecaregiversCardType = ref([{
			value: "1",
			text: "内地居民身份证"
		},
		{
			value: "2",
			text: "香港居民身份证"
		},
		{
			value: "3",
			text: "澳门居民身份证"
		},
		{
			value: "4",
			text: "台湾居民身份证"
		},
		{
			value: "5",
			text: "护照"
		},
		{
			value: "6",
			text: "军官证"
		},
		{
			value: "7",
			text: "士兵证"
		},
		{
			value: "8",
			text: "其他有效国籍旅行证"
		}
	]);

	// 与儿童关系
	const rangecaregiversRelationship = ref([{
			value: "1",
			text: "祖父母"
		},
		{
			value: "2",
			text: "外祖父母"
		},
		{
			value: "3",
			text: "叔 (婶)"
		},
		{
			value: "4",
			text: "伯 (母)"
		},
		{
			value: "5",
			text: "姑(父）"
		},
		{
			value: "6",
			text: "舅(母)"
		},
		{
			value: "7",
			text: "姨(父)"
		},
		{
			value: "8",
			text: "成年兄姐"
		},
		{
			value: "9",
			text: "其他"
		}
	]);

	const rangecaregiversHealth = ref([{
			value: "1",
			text: "健康"
		},
		{
			value: "2",
			text: "一般或较弱"
		},
		{
			value: "3",
			text: "慢性病"
		},
		{
			value: "4",
			text: "重病"
		},
		{
			value: "5",
			text: "残疾"
		},
		{
			value: "6",
			text: "未说明情况"
		},
		{
			value: "7",
			text: "其它"
		},
	]);

	const rangeadvise = ref([{
			value: "1",
			text: "经济帮扶"
		},
		{
			value: "2",
			text: "监护落实"
		},
		{
			value: "3",
			text: "户籍落实"
		},
		{
			value: "4",
			text: "教育帮扶"
		},
		{
			value: "5",
			text: "医疗帮扶"
		},
		{
			value: "6",
			text: "心理关爱"
		},
		{
			value: "7",
			text: "其它"
		},
	]);

	// 单位性质
	const rangeAgencyType = ref([{
			"text": "机关",
			"value": "1",
		},
		{
			"text": "事业",
			"value": "2",
		},
		{
			"text": "全额拨款事业",
			"value": "3",
		},
		{
			"text": "差额拨款事业",
			"value": "4",
		},
		{
			"text": "自收自支事业",
			"value": "5",
		},
		{
			"text": "企业",
			"value": "6",
		},
		{
			"text": "国有企业",
			"value": "7",
		},
		{
			"text": "非国有企业",
			"value": "8",
		},
		{
			"text": "民间组织",
			"value": "9",
		},
		{
			"text": "社会团体",
			"value": "10",
		},
		{
			"text": "民办非企业",
			"value": "11",
		},
		{
			"text": "军队",
			"value": "12",
		},
		{
			"text": "基金会",
			"value": "13",
		},
		{
			"text": "其他",
			"value": "14",
		}
	])

	const rules = ref({
		childName: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		childIdCardNumber: {
			rules: [{
				required: true,
				errorMessage: '身份证不能为空'
			}]
		}
	})

	function change(e) {
		console.log("e:", e);
	};

	function maskClick(e) {
		console.log('maskClick事件:', e);
	}

	function submit(ref) {
		if (!valiFormData.value.childName) {
			uni.showToast({
				title: "留守儿童姓名不能为空",
				icon: "none"
			});
			scrollViewVisible.value = false;
			nextTick(() => {
				scrollViewVisible.value = true;
				scrollLeft.value = 0; // 将滚动位置重置为0（最左侧）
			})
			current.value = 0;
			return;
		}

		if (!valiFormData.value.childIdCardNumber) {
			uni.showToast({
				title: "留守儿童身份证号不能为空",
				icon: "none"
			});
			scrollViewVisible.value = false;
			nextTick(() => {
				scrollViewVisible.value = true;
				scrollLeft.value = 0; // 将滚动位置重置为0（最左侧）
			})
			current.value = 0;
			return;
		}

		if (!valiFormData.value.advise) {
			uni.showToast({
				title: "请选择帮扶建议",
				icon: "error"
			});
			return;
		}

		ref.validate().then(res => {
			console.log('success', res);
			// begin
			uni.request({
				url: `${HOST}/dir/from/leftBehindChildren/save`,
				method: 'POST',
				header: {
					'content-type': 'application/json',
					'Authorization': 'Bearer ' + uni.getStorageSync('accessToken')
				},
				data: {
					...valiFormData.value
				},
				success: (res) => {
					if (res.data.status === "OK" && res.data.flag) {
						uni.showToast({
							title: "操作成功",
							icon: "success"
						});

						uni.navigateBack({
							delta: 1 // 返回上一页
						});
					} else if (Number(res.data.code) === 401) {
						uni.showToast({
							title: "登录超时",
							icon: "error"
						});
						uni.removeStorageSync('accessToken');
						uni.reLaunch({
							url: '/pages/login/index' // 这里的URL是登录页面的路径
						});
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "error"
						});
					}
				},
				fail: (err) => {
					console.error('请求失败', err);
					uni.showToast({
						title: "连接失败",
						icon: "error"
					});
				}
			});

			// end
			uni.showToast({
				title: `校验通过`
			})
		}).catch(err => {
			console.log('err', err);
		})
	};
</script>

<style lang="scss" scoped>
	.wrapper::v-deep .scroll-wrapper {
		white-space: nowrap;
		overflow-x: auto;
		// margin-bottom: 30rpx;
		-webkit-overflow-scrolling: touch;

		/* 隐藏滚动条 */
		&::-webkit-scrollbar {
			display: none;
		}
	}

	.wrapper::v-deep .segmented-control {
		display: block !important;
		overflow: auto !important;
	}

	.wrapper::v-deep .uni-segmented-control-wrapper {
		border-radius: 10rpx;
		padding: 0;
		background-color: #ffffff;

		.content {
			height: calc(100vh - 390rpx) !important;
			overflow: auto;
		}
	}

	.wrapper::v-deep .segmented-control__item--button {
		height: 100% !important;
	}

	.wrapper::v-deep .segmented-control__text {
		padding: 0 20rpx !important;
		height: 100% !important;
		line-height: 40rpx !important;
	}

	.wrapper::v-deep .uni-select__input-placeholder {
		font-size: 16px;
		color: #808080 !important;
	}

	.wrapper::v-deep .uni-date__x-input {
		font-size: 16px;
		color: #808080 !important;
	}

	.wrapper::v-deep .uni-select__selector-item {
		font-size: 16px !important;
	}

	.rule-form {
		border-radius: $myuni-border-radius-base;
		padding: $myuni-spacing-lg;
		background-color: $myuni-bg-color;
		margin-bottom: $myuni-spacing-lg;
	}

	.uni-forms::v-deep .uni-easyinput__content-input {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-forms::v-deep .uni-easyinput__placeholder-class {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-forms::v-deep .uni-select__input-text {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-forms::v-deep .uni-textarea-placeholder {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}
	
	.wrapper::v-deep .uni-forms-item{
		margin-bottom: $myuni-spacing-super-lg!important;
	}

	.rule-form::v-deep .uni-forms-item__label {
		display: none;
	}

	.rule-form::v-deep .is-input-border {
		border: 1px solid $myuni-bg-color-grey !important;
	}

	.rule-form::v-deep .uni-select {
		border: 1px solid $myuni-bg-color-grey !important;
	}

	.submitForm {
		border-radius: $myuni-border-radius-base;
		padding: $myuni-spacing-lg;
		background-color: $myuni-bg-color;
		background-size: 25%;
		background-repeat: no-repeat;
		background-position: right -30rpx bottom 0;
	}
</style>